{% extends 'base.html' %}

{% block title %}职位最多的城市 Top10{% endblock %}

{% block content %}
  <nav alia-label='breadcrumb'>
    <ol class='breadcrumb'>
      <li class='breadcrumb-item'><a href='/'>首页</a></li>
      <li class='breadcrumb-item'><a href='/job'>拉勾网职位数据分析</a></li>
      <li class='breadcrumb-item active' alia-current='page'>薪资最高城市 Top10</li>
    </ol>
  </nav>
  <div class='my-5' id='c1'></div>
  <table class='table table-striped my-5'>
    <thead>
      <tr>
        <th scope='col'>排名</th>
        <th scope='col'>城市</th>
        <th scope='col'>薪资（千元）</th>
      </tr>
    </thead>
    <tbody>
      {% for i in query %}
        <tr>
          <th scope='row'>{{ loop.index }}</th>
          <th>{{ i.city }}</th>
          <th>{{ i.salary | round(1, 'floor') }}</th>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}

{% block js %}
  <script>
    const data = {{ query | tojson }};
    const chart = new G2.Chart({
      container: c1,
      forceFit: true,
      height: 500
    });
    chart.source(data);
    chart.scale({
      salary: {tickInterval: 5, alias: '平均薪资'}
    });
    chart.interval().position('city*salary').color('#36B3C3');
    chart.render()
  </script>
{% endblock %}
